var righticonspan = document.getElementById('righticon1').getElementsByTagName('div');
var righticonchu = document.getElementsByClassName('icotabps')[0].getElementsByTagName('div');
console.log(righticonchu);
for (let i = 0; i < righticonspan.length; i ++) {
    righticonspan[i].addEventListener('mouseover', function () {
        righticonchu[i].style.visibility = 'visible';
        righticonspan[i].style.backgroundColor = 'red';
    })
    righticonspan[i].addEventListener('mouseout', function () {
        righticonchu[i].style.visibility = 'hidden';
        righticonspan[i].style.backgroundColor = '#4f4f4f';
    })
}
var box123=document.getElementsByClassName('box123')[0]
var box456=document.getElementsByClassName('box456')[0]
var erweima=document.getElementsByClassName('erweima')[0]
var huiding=document.getElementsByClassName('huiding')[0]
box123.onmouseenter=function(){
    erweima.style.display='block'
    box123.style.backgroundColor='red'
}
box123.onmouseleave=function(){
    erweima.style.display='none'
    box123.style.backgroundColor='#4f4f4f'
}
box456.onmouseenter=function(){
    huiding.style.display='block'
    box456.style.backgroundColor='red'
}
box456.onmouseleave=function(){
    huiding.style.display='none'
    box456.style.backgroundColor='#4f4f4f'
}
huiding.onmouseenter=function(){
    huiding.style.display='block'
    box456.style.backgroundColor='red'
}
huiding.onmouseleave=function(){
    huiding.style.display='none'
    box456.style.backgroundColor='#4f4f4f'
}
huiding.onclick=function(){
    var timer = setInterval(function () {
        document.documentElement.scrollTop -= 50
        // console.log(document.documentElement.scrollTop);
        if (document.documentElement.scrollTop <= 0) {
            clearInterval(timer)
        }
    }, 10)
}